I have a slider with images and videos which are fading in as soon as the elements are loaded. I am using a common lazy load library and as soon as the images/videos have the class "is-loaded", the opacity is animated from 0 to 1.

img.lazy,
video.lazy {
  opacity: 0;
}

img.lazy,
video:not(.initial),
_::-webkit-full-page-media, _:future, :root video:not(.initial){
  transition: opacity .3s;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
}

img.initial,
img.is-loaded,
img.error,
video.initial,
video.entered,
video.error{
    opacity: 1;
}

img:not([src]),
video:not([src]){
    visibility: hidden;
}

This works perfectly with images but videos are somehow blending in instantly. Even when I let the videos load in the background and go to the slide where the video is located, the video (which already has the class "is-loaded") is displaying instantly after a couple of milliseconds.

You can see this issue in my codepen: https://codepen.io/m42444/pen/PoOXxbG. Just click inside the blue dotted box to skip through the slides. The problem is just visible in the first loop where no element is loaded. Then, every slide is fade-animated on click (which has nothing to do with the loaded-fade-in).

It seems like the videos are firing "ready loaded" too soon and my fade in animation is happening with a video without any visible surface...

Thank you for any help! :)